@external animated, fadeInUp, gwt-Label;

.errorMsgContainer {
    font-family:Arial, sans-serif;
    background:#c54b4b;
    border-radius:5px;
    margin:2.5%;
    /* This cannot be absolute once we have multiple messages inside page */
    /*     position:absolute; */
    width:100%;
    height:100%;
    color:#fff;
    padding-left:10%;
}
.errorMsgContainer:before {
    content:'';
    position:absolute;
    background: url() no-repeat center 17px #871e1e;
    background-size:32px 32px;
    top:0;
    left:0;
    height:60px;
    width:100%;
    border-radius:5px 0 0 5px;
    box-shadow:0 67px 0 rgba(255,255,255,0.1) inset;
}

.errorMsgContainer .gwt-Label, .errorMsgContainerHeader .gwt-Label, .errorMsgContainerBody .gwt-Label 
{
	color:#fff;
}

.errorMsgContainerHeader {
    padding:20px 10px 20px 0;
    margin:0 20px 0 10px;
    font-size:21px;
    color:#3d0202;
    border-bottom:1px solid #b23d3d;
    position:relative;
    font-weight:bold;
}
.errorMsgContainerBody {
    padding:10px;
}
.animated {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-delay: 0.2s;
    animation-delay:0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}